<template>
    <a-drawer :width="700" :visible="true" title="服务订单详情" @cancel="handleClose" @ok="handleClose">
      <a-descriptions title="订单详情" :column="1" bordered>
    <a-descriptions-item label="ID">{{ order?.id }}</a-descriptions-item>
    <a-descriptions-item label="CID">{{ order?.cid }}</a-descriptions-item>
    <a-descriptions-item label="需求人姓名">{{ order?.demandPersonName }}</a-descriptions-item>
    <a-descriptions-item label="需求人手机号">{{ order?.demandPersonPhone }}</a-descriptions-item>
    <a-descriptions-item label="需求人座机号">{{ order?.demandPersonLandlinePhone }}</a-descriptions-item>
    <a-descriptions-item label="需求人标签">{{ order?.demandPersonTag }}</a-descriptions-item>
    <a-descriptions-item label="需求人省份">{{ order?.demandPersonProvince }}</a-descriptions-item>
    <a-descriptions-item label="需求人城市">{{ order?.demandPersonCity }}</a-descriptions-item>
    <a-descriptions-item label="需求人县区">{{ order?.demandPersonCounty }}</a-descriptions-item>
    <a-descriptions-item label="需求人地址">{{ order?.demandPersonAddress }}</a-descriptions-item>
    <a-descriptions-item label="分类名称">{{ order?.typeName }}</a-descriptions-item>
    <a-descriptions-item label="渠道名称">{{ order?.channelName }}</a-descriptions-item>
    <a-descriptions-item label="四级分类名称">{{ order?.fourTypeName }}</a-descriptions-item>
    <a-descriptions-item label="联系人姓名">{{ order?.contactName }}</a-descriptions-item>
    <a-descriptions-item label="联系人手机号">{{ order?.contactPhone }}</a-descriptions-item>
    <a-descriptions-item label="联系人省份">{{ order?.contactProvince }}</a-descriptions-item>
    <a-descriptions-item label="联系人城市">{{ order?.contactCity }}</a-descriptions-item>
    <a-descriptions-item label="联系人县区">{{ order?.contactCounty }}</a-descriptions-item>
    <a-descriptions-item label="联系人详细地址">{{ order?.contactAddress }}</a-descriptions-item>
    <a-descriptions-item label="预约时间">{{ order?.reservationTime }}</a-descriptions-item>
    <a-descriptions-item label="需求单编号">{{ order?.demandNo }}</a-descriptions-item>
    <a-descriptions-item label="服务单编号">{{ order?.serviceNo }}</a-descriptions-item>
    <a-descriptions-item label="金额">{{ order?.orderPrice }}</a-descriptions-item>
    <a-descriptions-item label="退款金额">{{ order?.returnPrice }}</a-descriptions-item>
    <a-descriptions-item label="服务订单类型">{{ order?.productType === 1 ? '保洁' : order?.productType === 2 ? '搬家' : order?.productType === 3 ? '保养' : order?.productType === 4 ? '维修' : '未知' }}</a-descriptions-item>
    <a-descriptions-item label="服务订单状态">{{ order?.serviceStatus == -1 ? '已取消' : order?.serviceStatus == 0 ?  '待付款' : '已付款' }}</a-descriptions-item>
    <a-descriptions-item label="需求状态">{{ order?.demandStatus === 1 ? '待跟进' : order?.demandStatus === 2 ?'已跟进'  : '已完成' }}</a-descriptions-item>
    <a-descriptions-item label="实收金额">{{ order?.payPrice }}</a-descriptions-item>
    <a-descriptions-item label="支付编号">{{ order?.payNo }}</a-descriptions-item>
    <a-descriptions-item label="服务订单创建时间">{{ order?.createTime }}</a-descriptions-item>
    <a-descriptions-item label="服务订单创建人">{{ order?.createUserName }}</a-descriptions-item>
    <a-descriptions-item label="退款状态">{{ order?.returnStatus === 1 ? '已拒绝' : order?.returnStatus === 2 ? '已提交' : order?.returnStatus === 3 ? '已通过' : '无' }}</a-descriptions-item>
    <a-descriptions-item label="退款发起时间">{{ order?.returnLaunchTime }}</a-descriptions-item>
    <a-descriptions-item label="退款发起人">{{ order?.returnLaunchUserName }}</a-descriptions-item>
    <a-descriptions-item label="支付时间">{{ order?.payTime }}</a-descriptions-item>
    <a-descriptions-item label="追加服务内容">
      <div v-for="(item, index) in order?.deatil" :key="index">
        <p><strong>商品ID:</strong> {{ item.id }}</p>
        <p><strong>商品数量:</strong> {{ item.num }}</p>
        <p><strong>商品单价:</strong> {{ item.unitPrice }}</p>
        <p><strong>商品总金额:</strong> {{ item.totalPrice }}</p>
        <p><strong>订单总金额:</strong> {{ item.orderPrice }}</p>
        <p><strong>服务单状态:</strong> {{ item.serviceStatus === -1 ? '已取消' : item.serviceStatus === 0 ? '待付款' : '已付款' }}</p>
        <p><strong>支付金额:</strong> {{ item.payPrice }}</p>
        <p><strong>支付单号:</strong> {{ item.payNo || '无' }}</p>
        <p><strong>创建时间:</strong> {{ item.createTime }}</p>
        <p><strong>商品名称:</strong> {{ item.productName }}</p>
        <p><strong>商品规格:</strong> {{ item.productSpecName }}</p>
        <p><strong>预约时间:</strong> {{ item.reservationTime }}</p>
        <hr v-if="index < order.deatil.length - 1" />
      </div>
    </a-descriptions-item>
  </a-descriptions>
    </a-drawer>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
  
  interface ServiceOrder {
    id?: number;
    demandPersonName?: string;
    demandPersonPhone?: string;
    reservationTime?: string;
    contactProvince?: string;
    contactCity?: string;
    contactCounty?: string;
    contactAddress?: string;
  }
  
  export default defineComponent({
    props: {
      order: Object as () => any,
    },
    emits: ['close'],
    setup(props, { emit }) {
      const handleClose = () => {
        emit('close');
      };
  
      return {
        handleClose,
      };
    },
  });
  </script>